<template>
  <div class="sign">
    <p class="sign_title">Hello，</p>
    <p class="sign_title">欢迎来到瑞鼎法拍</p>
    <div class="subscribe_ipt">
      <van-field v-model="sms" center clearable placeholder="请输入手机号">
        <template #button>
          <van-button class="subscribe_btn" @click="OnCode" v-if="show">
            <span>获取验证码</span>
          </van-button>
          <van-button class="subscribe_btn" v-else>
            <span>{{ second }}s</span>
          </van-button>
        </template>
      </van-field>
      <van-field v-model="value1" placeholder="输入验证码" />
    </div>
    <p class="sign_btn" @click="Onenroll">登录</p>
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
export default {
  data() {
    return {
      sms: "",
      value1: "",
      verifyCode: "",
      show: true,
      timer: null,
      second: 60
    };
  },
  methods: {
    OnCode() {
      if (this.sms == "" || this.sms.length != 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
        return;
      }
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.show = false;
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.sms
        })
        .then(res => {
          // Notify(res.data.msg);
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
            this.$notify({
              message: res.data.msg,
              duration: 2000
            });
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.second = 60;
            this.show = true;
          }

          // this.$message({
          //   message: res.data.msg
          // });
        })
        .catch(function(error) {});
    },
    Onenroll() {
      if (this.sms == "" || this.sms.length != 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
      } else {
        console.log(this.value1, this.verifyCode);
        if (this.value1 == this.verifyCode && this.value1 != "") {
          this.instance
            .fastLogin({
              telephone: this.sms,
              verifyCode: this.value1
            })
            .then(res => {
              this.$notify({
                message: res.data.msg,
                duration: 2000
              });
              if (res.data.code == 0) {
                // this.$message({
                //   message: "登录成功",
                //   type: "success"
                // });
                (this.value1 = ""),
                  (this.sms = ""),
                  sessionStorage.setItem("token", res.data.data.token);
                sessionStorage.setItem("photo", this.sms);
                sessionStorage.setItem("userId", res.data.data.id);
                this.$router.replace({
                  path: "/m_my",
                  params: { userId: res.data.data.id }
                });
              }
            })
            .catch(function(error) {});
        } else {
          this.$notify({
            message: "请正确输入验证码",
            duration: 2000
          });
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.sign {
  padding: 0.72rem 0.3rem;
  height: 5.22rem;
  background: url("~@/assets/image/background_1.png") left bottom no-repeat;
  background-size: 100%;
  .sign_title {
    font-size: 0.25rem;
    line-height: 0.26rem;
    margin-bottom: 0.2rem;
    color: #222222;
  }
  .subscribe_ipt {
    margin: 0.5rem 0;
    .van-cell {
      // background: #f9f9f8;
      border-bottom: 1px solid #dedbdb;
      margin-bottom: 0.1rem;
      height: 0.44rem;
    }
    .subscribe_btn {
      border: none;
      border-left: 1px solid #e3e0df;
      color: #f5643e;
    }
  }
  .sign_btn {
    background: #f5643e;
    border-radius: 10px;
    font-size: 0.15rem;
    color: #ffffff;
    line-height: 0.48rem;
    text-align: center;
  }
}
</style>
